Here's a more detailed breakdown of what has been done in this PR:

• The vast majority of the refactors throughout the codebase have to do with the update to react-router-dom v6, which works exclusively with hooks to obtain route information. Consequently, all usages of routes and routing had to be refactored to not use passed route parameters, but obtain such parameters from the new useParams() and similar hooks.
• I decided to remove connected-react-router entirely because it never served a real purpose for us to pipe routing information through our global state and it only made implementation more complicated while adding additional bundle weight and vulnerability area. As a result all redux facilitated route changes (using dispatch(push()/replace())) had to be refactored to use react-router's useNavigate() directly instead.
• All in all, this was a good opportunity to completely get rid of (almost) all HOCs, such as connect(), withRequest(), withBreadcrumbs() and proceeding to use hooks instead.
  • This also meant that the classic file structure we had of index.js, component.js, connect.js is no longer purposeful and instead, we can usually merge everything into a single index.js file.
  • In case of having to fetch initial data for a view, it is then required to use an inner and outer functional component, where the outer component fetches all required data and passes it down to the inner component. This is to avoid scenarios of running component logic that depends on fetched data without having such data ready initially. (This is somewhat similar to what higher-order components did)
• With the update to yup 1.0.0, it was necessary to refactor some validation schemas that used .when() to use arrays of parameters instead of spreading.
• To make the fetch table work again without HOCs, I had to use createSelector() hooks which take care of composing objects off of multiple selectors, to avoid unnecessary rerenders. Perspectively though, <FetchTable /> definitely needs to be rewritten entirely to improve maintainability and its usage.
• I also rewrote <ApiKeysForm /> and <CollaboratorsForm /> to be easier to use and maintain, while converting them to functional components and moving the logic of selecting correct selectors per entity to the containers instead of passing them on consumer level.
• I've also updated Cypress to the latest version, which required a bunch of updates to the spec to update deprecated instructions and rewriting the whole configuration setup to match the new format. Luckily, the tests run much faster now (at least locally)
• It was not possible unfortunately to upgrade babel-plugin-react-intl because it changed message collection in a way that is incompatible to our pipeline. I've spent quite some time researching ways to resolve this but had to give up for the time being.
• Similarly, it was not possible to update redux-actions to 3.0.0 because it would use ES module features that are incompatible with our unit-testing framework jest, even when transpiling via babel. This might be resolved in upcoming versions.

All in all the refactor became quite huge because there were so many components affected by the router update, but functionally there are no changes and the end-to-end test run through, so I think we can trust this quite a bit but I would still suggest scanning the diff to get a gist of what these refactors are about.

cc @ryaplots @mjamescompton @adriansmares